<template>
	<view class="homework-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">作业管理</text>
			</view>
			<view class="header-right">
				<uni-icons type="plus" size="18" color="#fff" @tap="showPublishModal"></uni-icons>
			</view>
		</view>

		<!-- 作业列表 -->
		<scroll-view class="homework-list" scroll-y="true">
			<view 
				v-for="(homework, index) in homeworkList" 
				:key="index" 
				class="homework-item"
				@tap="showHomeworkDetail(homework)"
			>
				<view class="homework-header">
					<view class="homework-title">
						<uni-icons type="paperplane" size="16" color="#FF9500"></uni-icons>
						<text class="title-text">{{ homework.title }}</text>
						<view v-if="homework.isUrgent" class="urgent-badge">
							<text class="badge-text">紧急</text>
						</view>
					</view>
					<view class="homework-status" :class="homework.status">
						<text class="status-text">{{ getStatusText(homework.status) }}</text>
					</view>
				</view>
				<view class="homework-content">
					<text class="content-text">{{ homework.description }}</text>
				</view>
				<view class="homework-info">
					<view class="info-row">
						<text class="info-label">截止时间：</text>
						<text class="info-value">{{ homework.deadline }}</text>
					</view>
					<view class="info-row">
						<text class="info-label">提交人数：</text>
						<text class="info-value">{{ homework.submittedCount }}/{{ homework.totalCount }}</text>
					</view>
				</view>
				<view class="homework-footer">
					<text class="publisher">发布者：{{ homework.publisher }}</text>
					<text class="publish-time">{{ homework.publishTime }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 发布作业弹窗 -->
		<view v-if="showPublish" class="modal-overlay" @tap="closePublishModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">发布作业</text>
					<uni-icons type="close" size="20" color="#999" @tap="closePublishModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="input-group">
						<text class="input-label">作业标题</text>
						<input 
							class="input-field" 
							v-model="newHomework.title" 
							placeholder="请输入作业标题"
						/>
					</view>
					<view class="input-group">
						<text class="input-label">作业描述</text>
						<textarea 
							class="textarea-field" 
							v-model="newHomework.description" 
							placeholder="请输入作业描述"
							:maxlength="500"
						></textarea>
						<text class="char-count">{{ newHomework.description.length }}/500</text>
					</view>
					<view class="input-group">
						<text class="input-label">截止时间</text>
						<picker 
							mode="date" 
							:value="newHomework.deadline" 
							@change="onDateChange"
						>
							<view class="picker-field">
								<text class="picker-text">{{ newHomework.deadline || '请选择截止时间' }}</text>
								<uni-icons type="calendar" size="16" color="#999"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="checkbox-group">
						<view class="checkbox-item" @tap="toggleUrgent">
							<uni-icons 
								:type="newHomework.isUrgent ? 'checkbox-filled' : 'checkbox'" 
								size="20" 
								:color="newHomework.isUrgent ? '#FF9500' : '#999'"
							></uni-icons>
							<text class="checkbox-text">标记为紧急作业</text>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel-btn" @tap="closePublishModal">
						<text class="btn-text">取消</text>
					</view>
					<view class="modal-btn confirm-btn" @tap="publishHomework">
						<text class="btn-text">发布</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue';

	// 作业列表
	const homeworkList = ref([
		{
			id: 1,
			title: '微积分第一章习题',
			description: '完成教材第一章的所有习题，包括1-1到1-5的所有题目。请认真完成，注意书写规范。',
			publisher: '张教授',
			publishTime: '2024-01-15 10:30',
			deadline: '2024-01-20 23:59',
			status: 'ongoing',
			isUrgent: false,
			submittedCount: 35,
			totalCount: 45
		},
		{
			id: 2,
			title: '导数计算练习',
			description: '计算以下函数的导数：1) y=x²+2x+1 2) y=sin(x) 3) y=e^x。请写出详细的计算过程。',
			publisher: '李老师',
			publishTime: '2024-01-14 14:20',
			deadline: '2024-01-18 23:59',
			status: 'ongoing',
			isUrgent: true,
			submittedCount: 28,
			totalCount: 45
		},
		{
			id: 3,
			title: '积分基础练习',
			description: '完成积分基础练习，包括不定积分和定积分的计算。',
			publisher: '张教授',
			publishTime: '2024-01-13 09:15',
			deadline: '2024-01-16 23:59',
			status: 'submitted',
			isUrgent: false,
			submittedCount: 42,
			totalCount: 45
		}
	]);

	// 发布作业相关
	const showPublish = ref(false);
	const newHomework = ref({
		title: '',
		description: '',
		deadline: '',
		isUrgent: false
	});

	// 返回上一页
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				// 如果返回失败，跳转到班级页面
				uni.navigateTo({
					url: '/pages/class/class'
				});
			}
		});
	};

	// 显示发布作业弹窗
	const showPublishModal = () => {
		showPublish.value = true;
	};

	// 关闭发布作业弹窗
	const closePublishModal = () => {
		showPublish.value = false;
		newHomework.value = {
			title: '',
			description: '',
			deadline: '',
			isUrgent: false
		};
	};

	// 切换紧急标记
	const toggleUrgent = () => {
		newHomework.value.isUrgent = !newHomework.value.isUrgent;
	};

	// 日期选择
	const onDateChange = (e: any) => {
		newHomework.value.deadline = e.detail.value;
	};

	// 发布作业
	const publishHomework = () => {
		if (!newHomework.value.title.trim()) {
			uni.showToast({
				title: '请输入作业标题',
				icon: 'none'
			});
			return;
		}

		if (!newHomework.value.description.trim()) {
			uni.showToast({
				title: '请输入作业描述',
				icon: 'none'
			});
			return;
		}

		if (!newHomework.value.deadline) {
			uni.showToast({
				title: '请选择截止时间',
				icon: 'none'
			});
			return;
		}

		// 创建新作业
		const homework = {
			id: homeworkList.value.length + 1,
			title: newHomework.value.title,
			description: newHomework.value.description,
			publisher: '我',
			publishTime: new Date().toLocaleString('zh-CN'),
			deadline: newHomework.value.deadline,
			status: 'ongoing',
			isUrgent: newHomework.value.isUrgent,
			submittedCount: 0,
			totalCount: 45
		};

		// 添加到列表开头
		homeworkList.value.unshift(homework);

		uni.showToast({
			title: '发布成功',
			icon: 'success'
		});

		closePublishModal();
	};

	// 获取状态文本
	const getStatusText = (status: string) => {
		switch (status) {
			case 'ongoing':
				return '进行中';
			case 'submitted':
				return '已提交';
			case 'overdue':
				return '已逾期';
			default:
				return '未知';
		}
	};

	// 显示作业详情
	const showHomeworkDetail = (homework: any) => {
		uni.showModal({
			title: homework.title,
			content: `描述：${homework.description}\n\n截止时间：${homework.deadline}\n提交进度：${homework.submittedCount}/${homework.totalCount}`,
			showCancel: false,
			confirmText: '确定'
		});
	};

	onMounted(() => {
		// 可以在这里加载作业数据
		// BACKEND REQUIRED: GET /api/class/{classId}/homework
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.homework-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #FF9500, #FF6B35);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.header-title {
		font-size: 18px;
		font-weight: 600;
		color: #fff;
	}

	.header-right {
		padding: 10rpx;
	}

	/* 作业列表 */
	.homework-list {
		padding: 20rpx;
	}

	.homework-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.homework-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.homework-title {
		display: flex;
		align-items: center;
		gap: 10rpx;
		flex: 1;
	}

	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.urgent-badge {
		background: #FF3B30;
		padding: 4rpx 12rpx;
		border-radius: 12rpx;
		margin-left: 10rpx;
	}

	.badge-text {
		font-size: 20rpx;
		color: #fff;
	}

	.homework-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	.homework-status.ongoing {
		background: #e8f5e8;
	}

	.homework-status.submitted {
		background: #e3f2fd;
	}

	.homework-status.overdue {
		background: #ffebee;
	}

	.status-text {
		font-size: 24rpx;
		color: #333;
	}

	.homework-content {
		margin-bottom: 20rpx;
	}

	.content-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.homework-info {
		margin-bottom: 20rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.info-label {
		font-size: 26rpx;
		color: #999;
		width: 140rpx;
	}

	.info-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.homework-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.publisher {
		font-size: 24rpx;
		color: #999;
	}

	.publish-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
		max-height: 60vh;
		overflow-y: auto;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 12rpx;
		display: block;
	}

	.input-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
	}

	.textarea-field {
		width: 100%;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 28rpx;
		background: #f9f9f9;
		min-height: 200rpx;
		resize: none;
	}

	.char-count {
		font-size: 24rpx;
		color: #999;
		text-align: right;
		margin-top: 10rpx;
	}

	.picker-field {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border: 1rpx solid #e0e0e0;
		border-radius: 8rpx;
		background: #f9f9f9;
	}

	.picker-text {
		font-size: 28rpx;
		color: #333;
	}

	.checkbox-group {
		margin-top: 20rpx;
	}

	.checkbox-item {
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 10rpx 0;
	}

	.checkbox-text {
		font-size: 28rpx;
		color: #333;
	}

	.modal-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		display: flex;
		gap: 20rpx;
	}

	.modal-btn {
		flex: 1;
		padding: 20rpx;
		border-radius: 8rpx;
		text-align: center;
	}

	.cancel-btn {
		background: #f0f0f0;
	}

	.confirm-btn {
		background: #FF9500;
	}

	.btn-text {
		font-size: 28rpx;
		color: #333;
	}

	.confirm-btn .btn-text {
		color: #fff;
	}
</style>
